<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function todolist(){
        fetch("/todos",{method:"get"})
        .then(function(response){
            return response.json();
        })
        .then(data=>{
            document.getElementById('abs').innerHTML='';
            var opera=data.dotos;
            var aaa=(data.todos)
            document.getElementById('abs').innerHTML='';
            for(var i=0;i<aaa.length;i++){
                var data='<li><span>'+'ID号：'+aaa[i].id+'代办事项：'+aaa[i].title+'</span></li>';
                document.getElementById('abs').innerHTML += data;
                }
        })
        }
        function addtodos(){
        if(document.getElementById('tex').value!='')
        var headers = { "Content-Type": "application/x-www-form-urlencoded" }
        fetch("/todos",{
            method:"post",
            body:"title="+document.getElementById('tex').value,
            headers:headers
        })
        todolist()
        }

        function deltodos(){
        var headers = { "Content-Type": "application/x-www-form-urlencoded" }
        fetch("/todos/mark_completed",{
            method:"post",
            body:"todo_id="+document.getElementById('cba').value,
            headers:headers
        })
        todolist()
        }

    </script>
</head>
<body onload="todolist()">
    <div >
    <h1>代办事项清单</h1>
    <div>
        <input id="tex" type="text" placeholder="添加新事项"><input type="button" value="添加" onclick="addtodos()">
    </div>
    <div>
        <ul id="abs">
        </ul>
    </div>
    <div>
        <input type="text" id="cba" placeholder="输入完成的ID号"><input type="button" value="已完成 并删除" onclick="deltodos()">
    </div>
    </div>
</body>
</html>